<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        body {
            background-color: #000;
            color: #666;
            text-align:center;
        }
        audio {
            width: 450px;
            margin: 30px 0;
        }
        .container {
            height: 420px;
            overflow: hidden;
        }
        ul {
            transition: transform 0.3s;
        }
       li {
           line-height: 30px;
           height: 30px;
           transition: transform 0.3s;
       }
       .active {
           color: white;
           transform:scale(1.2)
       }
    </style>
</head>
<body>
    <audio controls src="./music.mp3"></audio>
    <div class="container">
        <ul>
        </ul>
   </div>
 
</body>
<script>
    const lrcList = [
    "[00:23]正月十八",
    "[00:25]黄道吉日",
    "[00:27]高粱抬",
    "[00:29]抬上红装",
    "[00:31]一尺一恨",
    "[00:32]匆匆裁",
    "[00:35]裁去良人",
    "[00:36]奈何不归",
    "[00:38]故作颜开",
    "[00:41]响板红檀",
    "[00:42]说得轻快",
    "[00:43]着实难猜",
    "[00:45]听着",
    "[00:46]卯时那三里之外翻起来",
    "[00:49]平仄",
    "[00:50]马蹄声渐起斩落愁字开",
    "[00:53]推门雾自开",
    "[00:55]野猫都跟了几条街",
    "[00:56]上树脖子歪",
    "[00:57]张望瞧她在等",
    "[00:58]这村里也怪",
    "[00:59]把门全一关",
    "[01:01]又是王二狗的鞋",
    "[01:02]落在家门外",
    "[01:03]独留她还记着",
    "[01:04]切肤之爱 属是非之外",
    "[01:05]这不",
    "[01:06]下马 方才",
    "[01:08]那官人笑起来",
    "[01:13]那官人乐着寻思了半天",
    "[01:17]只哼唧出个 离人愁来",
    "[01:21]她这次又是没能接得上话",
    "[01:25]她笑着哭来着",
    "[01:27]你猜她怎么笑着哭来着",
    "[01:28]哭来着",
    "[01:30]你看她怎么哭着笑来着",
    "[01:31]（一拜天地）",
    "[01:40]（二拜高堂）",
    "[01:52]（夫妻对拜）",
    "[01:55]堂前",
    "[01:58]他说了掏心窝子话",
    "[02:01]不兑上诺言",
    "[02:02]岂能潇洒",
    "[02:05]轻阴",
    "[02:09]叹青梅竹马",
    "[02:12]等一玉如意",
    "[02:15]一酒桶啊",
    "[02:18]她竖起耳朵一听",
    "[02:20]这洞房外",
    "[02:23]那好心的王二狗跑这",
    "[02:26]给她送点心来了",
    "[02:28]她这次可是没能说得上话",
    "[02:33]她笑着哭来着",
    "[02:34]你猜她怎么笑着哭来着",
    "[02:36]哭来着",
    "[02:38]你看她怎么哭着笑来着",
    "[02:40]",
    ]

    var lrcData = lrcList.map(item => {
        const target = item.split(']')
        const timeList = target[0].slice(1).split(':')
        const time = (+timeList[0]) * 60 + (+timeList[1])
        return {
            time,
            word: target[1]
        }
    })



    const doms = {
        audio: document.querySelector('audio'),
        container: document.querySelector('.container'),
        ul: document.querySelector('ul'),
    }

    // 当返回-1 说明还没到歌词

    const findIndex = () => {
        const currentTime =  doms.audio.currentTime
        for (let i=0;i < lrcData.length;i++ ) {
           if (currentTime < lrcData[i].time){
             return i - 1
           }
       }
       // 歌词唱完，一直显示最后一句，或者准备一个空字符
       return lrcData.length - 1
    }

    //使用 模版字符串是直接给的字符串，要先解析字符串转换为dom，效率更低
    // 创建dom 直接修改dom树
    function createDom(){
        const fragment = document.createDocumentFragment()
        lrcData.forEach(item => {
            const li = document.createElement('li')
            li.innerText = item.word
            fragment.appendChild(li)
        })
        doms.ul.appendChild(fragment)
       
    }
    createDom()

    // 设置偏移量
    // 获取容器高度，获取几何信息会导致重绘，所以不要放在循环调用中
    const containerHeight = doms.container.clientHeight
    const liHeight = doms.ul.children[0].clientHeight
       // 当歌词播放玩，不希望歌词继续滚动到中间了，可以设置一个最大偏移
    // const maxOffset = doms.ul.clientHeight - containerHeight

    function setOffset () {
        const index = findIndex()

        
        // 歌词相对容器的偏移量 ： 滚动的高度 - 容器一半
        // 歌词往上滚动的高度，是每个li的高度，加上当前li的一半。
        let offset = liHeight * index + liHeight / 2 - containerHeight / 2
       

        // offset 是负数的时候，代表还没开始歌词
        if (offset < 0) {
            offset = 0
        }
        // if (offset > maxOffset) {
        //     offset = maxOffset
        // }
        const li = doms.ul.querySelector('.active')
        if(li) {
           li.classList.remove('active')
        }
        
        doms.ul.style.transform =`translateY(${-offset}px)`
        if (index > -1) {
            doms.ul.children[index].classList.add('active')
        }
       
    }

    doms.audio.addEventListener('timeupdate', setOffset)



    const goods = [
        {
            price: 23,
            name: '商品1'
        },
        {
            price: 32,
            name: '商品2'
        },
    ]
    // 购物车
    // 单个商品
    class UIGood {
        constructor(g) {
            this.data = g
            this.choose = 0
        }

        // 这里是函数，外部要执行
        getTotalPrice () {
            return this.data.price * this.choose
        }
        // 这样写，就变成属性，使用了Object.defineProperty的getter的语法糖
        get totalPrice() {
              return this.data.price * this.choose  
        }
        // 是否选中
        isChoose () {
            return this.choose > 0
        }

        increase(){
            this.choose++
        }
        decrease(){
            if (this.choose === 0) {
                return
            }
            this.choose--
            
        }
    }
   

    // 所有数据
    class UIData {
        constructor(goods){
            this.UIGoods = goods.map(item => new UIGood(item))
        }

        getTotalPrice(){
            return this.UIGoods.reduce((pre, current) => {
                pre += current.getTotalPrice()
                return pre
            }, 0)
        }

        increase(index){
            this.UIGoods[index].increase()
        }

        decrease(index) {
            this.UIGoods[index].decrease()
        }
        getTotalNumber() {
            return this.UIGoods.reduce((pre, current) => {
                pre += current.choose
                return pre
            }, 0)
        }
    }

 // 整个界面
    class UI{
        constructor(){
            this.UIData = new UIData(goods)
            this.createHtml()
        }

        createHtml(){

        }

        increase(index){
            this.UIData.increase(index)
            this.updateGoodItem(index)
        }

        decrease(index) {
            this.UIData.decrease(index)
            this.updateGoodItem(index)
        }

        // 更新商品数量显示数量
        updateGoodItem(index){}

        // 购物车动画
        carAnimation (){}

        // 更新页面其他数据
        updateDetail(){


            // 抛物线动画结束后，购物车抖动一下动画
            // div是
            div.addEventListener(
                'transitionend',
                () => {
                    div.remove()
                    this.carAnimation()
                },
                {
                    once: true // 防止多个动画冒泡，这个抖动动画执行多次
                }
            )
        }
    }


    function vortex(n,m) {
        const nums = new Array(n).fill(0).map(() => new Array(m).fill(0))
        let i = 0,j = 0, stepi = 1, stepj = 0;
        let count = 1
        function isBlock(){
            return !nums[j] || nums[j][i] !== 0
        }
        while(1) {
            nums[j][i] = count++;
            // 改动i和j
            i += stepi;
            j += stepj;
            console.log('222',i, j)
            if (isBlock()) {
                i -= stepi;
                j -= stepj;
                console.log('111',i, j)
                // 转弯
                if (stepj === 0) {
                    stepj = stepi;
                    stepi = 0;
                } else {
                    stepi = -stepj;
                    stepj = 0;
                }
                i += stepi;
                j += stepj;
                console.log('333',i, j)
            }
            if (isBlock()) {
                break;
            }
        }
        return nums
        }

 
</script>
</html>
